In this lecture, we're going to take a look at the GUI object class and how this class is used to create
all sorts of different UI objects like text labels, image labels, frames, and so on.
It states that GUI object is an abstract class for a 2D user interface object.
It defines all the properties relating to the display of a graphical user interface object, such as
size position.
It also has some useful read only properties like absolute position, absolute size, and absolute rotation.
It should be noted that GUI object can have negative sizes and render.
Normally, though GUI objects anchor point ought to be used to better control rendering.
So this is the base class that is inherited by other 2D objects in our game, such as text labels,
frames, image labels.
And we're going to go ahead and take a look at those inside of studio.
Let me go ahead and create a new screen GUI inside of the starter GUI.
And let's go ahead and first take a look at the frame instance.
So this is a 2D object that will display on your screen.
And this frame is just a solid color on the screen.
We are able to resize the frame to whatever size we want, and we can change the color and some other
properties inside of it.
If we go ahead and take a look at the properties panel, there's some settings for us to adjust, such
as the background color for the frame.
So I'm able to change the background color to whatever I want.
Maybe I want it to be a bright green.
I'm able to change the anchor point, which defines the position that the GUI should reshape or scale
at.
So for example, the current anchor point is zero zero, which is up in this corner right here you can
see this little black icon.
That is the anchor point.
And if I swap the position on the x axis to one, you'll see that my frame has shifted.
And now the anchor point is over here.
So this anchor point not only determines how this UI should be reshaped when the screen is scaled,
but it also determines the position of our UI.
So right now its current position is about 44% on the x axis and 36% on the y axis.
We are able to adjust some other properties, such as how transparent we want the background to be.
If we want it to completely disappear, we can make it completely transparent or we can make it completely
opaque.
We are able to add a border around the frame and change the color as well.
So maybe I want a white border around my frame.
I can go ahead and make a white color, and then set the size to be something like five pixels.
So now I have a border around my frame that is five pixels in width.
And then I'm also able to change some other things about the border.
For example, in what direction do I want the border to be sized?
Currently it's set to outline, so the extent of our frame is right here.
And then the border extends beyond that.
But if I swap the border mode to let's say middle now what's going to happen is the border is going
to be in the center.
So you basically have two and a half pixels over here and two and a half pixels over here.
But since you can't cut pixels in half, then we I think we have three pixels on this side and two pixels
on that side.
And then if I set the border mode to be inset, then the border is going to be on the inside rather
than on the outside of the border of our frame.
The layout order property has to do with some UI constraints, which we're going to take a look at in
a future lecture.
So we're not going to worry about this for now.
The other thing we want to go ahead and take a look at is the size and position.
So this stores the position of our guy.
So as I move my guy around you can see the position updating.
And same thing goes with the size.
As I resize my UI you can see the size changing.
And right now it's being stored in pixels.
So you'll notice that there's two different values for these position and size properties.
One is scale and one is offset.
We're going to be talking about that more in the next lecture.
But for now don't worry about it.
Another property I actually want to talk about here is called automatic size.
And this allows us to resize our UI.
If any descendants in the frame go beyond the border of the frame.
So for example, let me duplicate this frame and let me put it as a child of the other frame and let
me go ahead and change the color.
So that way we know which one is which.
I'll make this one like a yellow.
And then let me resize it.
So currently this other frame is a child of my green frame, and if I move it beyond my frame, it's
still visible on the screen and my other frame stays the same.
Now, if I wanted to resize this frame to include or basically wrap around this other frame that has
moved beyond its borders, then that's what we use the automatic size property for.
So for example, if I swap it to X it kind of shifted things around.
But now as I move my frame currently it's being a little bit weird because we have the anchor point
set, and just resizing or moving around things on the screen can get kind of glitchy when we're using
automatic size, but you can basically see how it's resizing to try and hold this UI element inside
of it.
It's a little buggy right now, but if you use it in scripts, it'll work fine.
If I put the anchor point back to zero zero and then I were to resize.
As you can see, it's trying to.
Hold on.
Actually, let me swap the original one back to zero zero.
Let me remove it back over here.
And let's go ahead and try now.
There we go.
It's acting a little bit better.
So as you can see, as my frame goes beyond the border, it's forcing my green frame to resize in the
x direction.
And we can do the exact same thing for the y direction as well.
So if I swap this to y now, if I move this frame downwards, it's going to force my frame to resize
in that direction.
And then x and Y is going to do it on both the x and the y axis.
Another property I want to go ahead and take a look at is something called the z index.
And this determines how GUI should be displayed on the screen.
So if I take this frame and put it inside of the GUI.
So we have two different frames.
Currently my yellow frame is displaying over top my green frame.
If I want my green frame to render over my yellow frame, I need to increase its z index.
So for example, if I set it to ten now, it's going to render over any other objects in the GUI that
have a z index less than ten.
If I want my yellow GUI to render over my green GUI, then I need to simply set its z index higher than
the z index for my green GUI.
So if I set it to 100 now, it's going to always render over my green GUI.
Let me go ahead and duplicate this green guy and let me make a red one.
And let's say I set this z index to be 200.
So now what you're going to see with my yellow frame, if I can find it, let me grab it.
Is that it's going to render over my green frame, but it's not going to render over my red frame.
And that's because my red frame has a higher z index than the other frames.
The last property I want to go ahead and talk about is clip descendants.
So if I put my yellow frame back in my green frame and let's say I move my yellow frame outside of the
bounds of my green frame, currently it's being rendered on the screen.
And that's because we have clip descendants set to false.
But once I enable clip descendants, you can no longer see the yellow frame because it's outside of
the bounds of my green frame, so it's clipping all of its descendants.
If I start to move it back inwards, let me actually go ahead and disable that.
And let me put it like halfway.
What you're going to see is that it's going to be cut in half because the other half is outside of the
bounds.
So it's not going to be rendered on the screen.
Okay.
Now let's go ahead and take a look at a text label.
And a text label is literally just a frame, but it has text inside of it.
So it has all the same properties that you would find in a frame, such as the background color, the
transparency border color, the anchor point, the position and size, as well as z index and clip descendants.
But we get some extra settings relating to text, so we're able to change the font of the text inside
of our text label.
There's a whole bunch of different fonts here, and you can even grab more from the toolbox.
We are able to bold the text or make it italicized, and change the weight of the text as well.
If it allows.
For this particular font, we aren't able to change the weight, but some other fonts you are able to
change the weight.
We have another property here called line height which determines the vertical spacing if you have multiple
different layers of text.
So as an example, let me go ahead and enable text scaled.
So that way my text scales with the size of my text label.
And then let me just say something like, hello.
And let me just go ahead and copy and paste this a whole bunch of different times.
There we go.
So we have three layers of text.
And then by adjusting the line height we can adjust the vertical spacing between this text.
So if I set it to zero there is no vertical line height.
So it's just going to put the text one after the other.
If I set it to 0.1 then we have that spacing right there and our text is pretty crushed together.
But of course you can adjust this however you want.
And as I slowly increase it, as you can see the text is spacing out more and more.
And by default it's going to be set at one.
If I want it to be spaced out even more.
Then I can set it to 2 or 3 or whatever the case may be.
This other property called max visible graphemes.
The purpose of this property is to apply a typewriter effect to our text.
So currently it's set to negative one, which indicates that it's going to display all of the text in
the text label.
If I set it to zero, what's going to happen is it's going to display zero characters in our text label.
If I set it to one, it's going to actually let me go ahead and hit enter.
If I set it to one, it's only going to display one character, because this is determining how many
characters in the text label we're supposed to display.
If I put ten, it's going to display ten characters.
We have one, two, three, four, five.
This space is also counted as a character, so six, seven, eight, nine and ten.
If I set it to 50, it's going to display more blah blah blah.
This is where you can script it to create a typewriter effect by gradually incrementing the amount for
this property.
And then if you want to display all of the text, you just set it to negative one.
The rich text property determines whether or not this text label can support rich text formatting or
rich text stylization.
We're not going to go too much into depth with that.
That's a completely different topic for another lecture.
Now, of course, we're also able to change the color of our text.
So if we want to make our text green, we can make it green or whatever color we want across the color
spectrum.
This other property called text direction, we're not going to worry about too much because it has to
do with accessibility of text.
And some languages, text is displayed from right to left rather than left to right.
And that's the purpose of this property.
You have to go and adjust another setting in the starter GUI, which is called RTL or right to left
tech support.
We're not going to worry about this for now.
Of course, the other property that we just saw was text scaled, so if I disable it, our text is going
to be equal to the text size that we have determined here.
So if I set it to 20 it makes it larger.
If I set it to 50 it makes it even larger.
And then if I enable text scale, it's going to ignore the text size property.
And the text font size is just going to scale with the size of our text label.
We are also able to add a stroke or an outline to the text.
So what I'm going to do is I'm going to set the stroke transparency to zero, and then we can add something
like a green stroke around our text just like that.
These text stroke properties are kind of deprecated.
There is a better alternative which is called a UI stroke instance, which we're going to take a look
at in the future.
So I don't really recommend using the text stroke properties because it's very limited.
It doesn't allow you to adjust the thickness of the stroke around the text.
It only allows you to change the color and the transparency.
If you want to be able to change the thickness of the stroke, that's what we're going to be using a
UI stroke instance for.
And we're going to take a look at that in a future lecture.
But for now I'm just going to disable Lamp.
The next property we can go ahead and take a look at is text truncate.
And what this does, if I set it to at end and let me go ahead and disable text scaling.
And then let me just size up my text very large and let me just decrease the size.
What you'll notice is now there are three dots at the end of our text label.
So that's what it does.
It adds a couple extra dots at the end to indicate that, hey, there's extra text in this text label,
but it's cut off because there's not enough room to display in the text label.
So if I continue to resize, those extra words will pop up inside of the text label, and then those
three extra dots will appear inside.
And then if I'm able to display all the text, then those three dots disappear.
So that's the purpose of that property.
Text wrap, which is what we saw, allows us to wrap the text to be in layers if I have it disabled.
As you can see, our text looks ugly and it goes off of our frame, but if we enable it now, the text
is being properly wrapped inside of our text label, and then we have some settings for the alignment
of our text.
So on the x axis, do we want it to be on the left.
We want it to be on the right.
Do we want it to be in the center?
And then the same thing goes with the y axis.
We can set it to the top or the bottom or set it to the center.
The last object we're going to take a look at is called the image label.
And this allows us to display images on the screen.
So this is basically another frame but with images inside of it.
So again it has all the same properties that a regular frame would have.
But it also has some additional properties relating to images.
So we're able to put an ID in here to display an image on the screen.
We can change the color of that image.
And there's some additional settings here as well.
So if I want to make the color of my image, let's say a dark red, then I can do that.
Or if I want to make it white or just keep the regular color of whatever the image is, then we just
set it to white.
And then there's some additional settings here called image rect offset and image rect size.
So this allows us to change the size in pixels that we would like to basically cut into our image.
So let's say this image the resolution of this image is 512 by 512 pixels.
Well let's say we want to zoom only into a small section of this image.
Let's say we want to zoom in to 100 by 100 pixels.
Well that's what we would use the rect size for if I set it to 100 by 100 pixels.
Now we are zoomed into the image, and we can move around the position of the image by using the image
rect offset.
So I can move like 20 pixels along the x axis and then 50 pixels down the y axis.
And now you can see that we're zoomed into a particular section of our image.
So now we can see the bottom corner of this little icon here.
The main purpose of these two properties is basically for creating animations in your images.
So let's say you upload an image that has a set of different elements inside of it, and then you can
shift around the position of the image to basically create the effect of an animation.
So you would have an image with, let's say 20 different frames inside of it, and then you just shift
around the position of the image to each one of those frames to create an animation or video kind of
effect.
We're also able to change the transparency of the image as well.
So if we want our image to be completely transparent, but we want to keep our background transparency,
we can do that.
Or let's say we have a transparent image and we want to be able to hide the background transparency.
We can do that as well.
Unfortunately, this image is completely opaque.
So actually let me reset these values back to zero so we can see the whole image.
And then let's go ahead and grab an image from the toolbox.
For example this image right here has a transparent background.
So if I place it inside of it, as you can see, we're only rendering the image because the background
transparency is set to one.
But if I set it to zero and now we're going to have a background rendered, and then if I want the image
to be transparent, then I can adjust that as well down here.
And there you go.
Our image has disappeared.
Now this property down here called Resample Mode basically just determines how the image should look
when it is scaled, because sometimes the image might get scaled up to a larger resolution than the
image was originally.
So if we set it to pixelated, what's going to happen is it's going to preserve the sharp edges of the
pixels in the image.
If we set it to default, what the game engine is going to try and do is it's going to try and smooth
out those edges to look a little bit more natural on screen.
But if you want to preserve that pixel edge, then you would set it to pixelated.
And then the last property we can look at here is called scale type, which simply determines how the
image should look inside of the image label.
So if we set it to crop, then it's going to crop the image to match or try to fit into whatever the
size of our image label is.
So we are able to basically cut and crop the image if we set it to stretch, which is what it is by
default, then it's going to stretch the image to try and match the size or shape of our image label.
So now we've really squished down our guy here, but instead if we set it to cropped, it's going to
maintain the aspect ratio of the original image, and it's just going to cut it when it can't fit inside
of our image label.
There's a few other in here, such as fit, so it'll scale the image down to try and fit the entire
thing within our image label.
Even if our image label is resized like this, it's just going to try and fit the whole image in here.
If we set the scale type to slice, it's going to open up some additional properties that we can adjust.
We're going to take a look at this scale type more in depth later.
But the main purpose of this scale type is to help you adjust the aspect ratio of image labels that
you have in your GIS.
Because, for example, if you have an image label that's supposed to represent a background of something
and it has like some fancy little decor on the corners, if your image label gets resized funky, sometimes
the edges of that image label can get stretched and it will look weird.
So what slice allows you to do is it allows you to determine different areas that are supposed to have
different aspects.
Ratios in your image, so that way it doesn't look distorted.
Again, you don't need to worry about this right now.
We're going to take a look at this more in depth in the future.
The last one here is called tile, which as you would expect would create tiles of the image.
So right now the tile is set to a size of one on the x and y axis for scale.
So that means it's going to be the entire image scaling to the entire size of our image label.
But let's say we want it to be a specific size in pixels.
So let's say 100.
Let me go ahead and set that to zero by 100 pixels.
Right.
So now what we're going to have is the image repeating over and over and over again.
So it's a tile.
And each one of these images is 100 by 100 pixels.
And as I resize my image label, it's going to include more and more of the same image with that particular
size, which is very cool.
Okay, in the next lecture, we're going to take a closer look at position and size.
And we're going to learn the difference between scale and offset and how that relates to the anchor
point of a GUI object.
So I'll see you there.